import * as echarts from "echarts"

// 使用水平折线图表
export default function useHorizontalBarChart(salvProValue: any, salvProName: any, maxValue: number, colorsMap: { [key: number]: any }) {
    // var salvProName = ["安徽省", "河南省", "浙江省", "湖北省", "贵州省", "江西省", "江苏省", "四川省", "云南省", "湖南省"];
    // var salvProName = ["10ml", "10-15ml", "15-30ml", "30ml"]
    // var salvProValue = [239, 181, 154, 144, 135, 117, 74, 72, 67, 55];
    // var salvProValue = 
    var salvProMax = [];//背景按最大值

    for (let i = 0; i < salvProValue.length; i++) {
        // salvProMax.push(salvProValue[0])
        salvProMax.push(maxValue)
    }


    // 设置不同的颜色
    const realCustomData = salvProValue.map((data: any, idx: number) => {
        return {
            value: data,
            itemStyle: {
                normal: {
                    barBorderRadius: 10,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        // color: 'rgb(57,89,255,1)'
                        color: colorsMap[idx][0]
                    }, {
                        offset: 1,
                        // color: 'rgb(46,200,207,1)'
                        color: colorsMap[idx][1]
                    }]),
                },
            },
        }
    })

    const option = {
        // backgroundColor: "#003366",
        grid: {
            left: '2%',
            right: '2%',
            bottom: '2%',
            top: '2%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none'
            },
            formatter: function (params: any) {
                return params[0].name + ' : ' + params[0].value
            }
        },
        xAxis: {
            show: false,
            type: 'value',
        },
        yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
                show: true,
                // formatter: "{value} %", //右侧Y轴文字显示
                textStyle: {
                    color: '#fff'
                },
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            data: salvProName
        }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
                textStyle: {
                    color: '#ffffff',
                    fontSize: '12'
                },
            },
            data: salvProValue
        }],
        series: [{
            name: '值',
            type: 'bar',
            zlevel: 1,
            // itemStyle: {
            //     normal: {
            //         barBorderRadius: 10,
            //         color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            //             offset: 0,
            //             color: 'rgb(57,89,255,1)'
            //         }, {
            //             offset: 1,
            //             color: 'rgb(46,200,207,1)'
            //         }]),
            //     },
            // },
            barWidth: 10,
            // data: salvProValue
            data: realCustomData,
        },
        {
            name: '背景',
            type: 'bar',
            barWidth: 10,
            barGap: '-100%',
            data: salvProMax,
            itemStyle: {
                normal: {
                    // color: 'rgba(24,31,68,1)',
                    color: 'rgba(53, 216, 252, 0.15)',
                    barBorderRadius: 30,
                }
            },
        },
        ]
    };

    return option
}